<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

</head>

<body>
    <input type="text" name="" id="ipt">

    <ul>
        <!-- 
        <li>
            <input type="checkbox" name="" id="">
            <p>
            </p>
            <button>删除</button>
        </li> -->
    </ul>
    <script>
        /*
            1-发布
            2-列表
            3-删除
            4-修改
        */
        let baseURL = 'http://localhost:3000'
        let todoAPI = '/todos'
        let http = axios.create({
            baseURL
        })
        // 1-发布
        // 按回车的 --获取输入框值 调用发布接口

        $(document).keydown(function (e) {
            if (e.keyCode == 13) {
                let title = $('#ipt').val();
                let completed = 0;
                http.post(todoAPI, { title, completed }).then(r => {
                    console.log(r.data);
                    //发布成功了
                    $('#ipt').val('')
                    // 重新加载列表
                    loadList()
                })

            }
        })

        // 2-列表
        async function loadList() {
            let r = await http.get(todoAPI);
            console.log(r.data);

            let liStr = r.data.map(v => `
                <li>
                    <input data-id="${v.id}" class="ck" type="checkbox" name="" id="" ${v.completed == 0 ? '' : 'checked'}>
                    <p>${v.title}
                    </p>
                    <button onclick="delFn(${v.id})">删除</button>
                    <button class="del" data-id="${v.id}">删除</button>
                </li>
            `).reverse().join('')
            $('ul').html(liStr)
        }


        // 重新加载列表
        loadList()


        // 3-删除
        function delFn(id) {
            console.log(id);
            //
            http.delete(todoAPI + '/' + id).then(r => {
                loadList()
            })
        }

        // jq 事件委托-- 自定义属性
        $('ul').on('click', '.del', function () {
            console.log('点了删除按钮');
            console.log(this);
            let id = $(this).attr('data-id')
            console.log(id);
            http.delete(todoAPI + '/' + id).then(r => {
                loadList()
            })
        })

        // 修改
        $('ul').on('change', '.ck', function () {
            console.log(this);
            console.log(this);
            let ck = $(this).prop('checked');
            // 要修改的状态
            console.log(ck);
            let id = $(this).attr('data-id')
            console.log(id);

            //判断-要修改的 completed的值
            let completed = ck == true ? 1 : 0

            http.patch(todoAPI + '/' + id, { completed }).then(r => {
                //修改成功刷新列表
                loadList()
            })

        })


    </script>

</body>

</html>